<template>
  <div class="box">
    <h2>Son1 子组件</h2>
    <!--
      2. 获取state数据
         1. this.$store.state.变量名（掌握）
         2. 通过计算属性获取store数据（了解）
     -->
    <!-- 从vuex中获取的值: <label>{{$store.state.count}}</label> -->
    从vuex中获取的值: <label>{{count}}</label>

    <br>
    <p>{{$store.state.obj.name}}</p>
    <p>{{obj}}</p>
    <button @click="add(1)">值 + 1</button>
    <button @click="add(5)">值 + 5</button>
    <button @click="add(10)">值 + 10</button>
    <button @click="changeCountFn">1s修改count的值为666</button>
    <hr>
    <p>访问getters中的数据:{{$store.getters.filterList}}</p>
    <hr>
    <h2>访问模块内的数据</h2>
    <p>访问user模块下的userInfo.name:{{$store.state.user.userInfo.name}}</p>
    <p>访问user模块下的getters:{{$store.getters['user/upperCaseName']}}</p>
    <p>访问setting模块下的theme:{{$store.state.setting.theme}}</p>
    <h2>调用模块内的mutations方法</h2>
    <button @click="$store.commit('user/setUserInfo',{name:'ls',age:20})">更新user模块下的userInfo</button>
    <button @click="$store.commit('setting/setTheme','black')">更新setting模块下的theme</button>
    <hr>
    <h2>调用模块内的actions方法</h2>
    <button @click="$store.dispatch('user/setUserInfoAsync',{name:'laoli',age:50})">1s后修改用户信息</button>
  </div>
</template>

<script>
// 1. 导入mapState函数(掌握)
import { mapState } from 'vuex'
export default {
  name: 'Son1Com',
  computed: {
    // count () {
    //   return this.$store.state.count
    // },
    // 2. 通过mapState函数获取state中的数据=》...mapState(['变量名1',''变量名2'...])
    ...mapState(['count', 'obj'])
  },
  created () {
    // console.log('获取vuex仓库实例：', this.$store)
    // console.log(this.$store.getters)
  },
  methods: {
    add (num) {
      // 直接修改store中的count变量值=> 违背单向数据流（开启严格模式，回报错）
      // this.$store.state.count++ // 错误的
      this.$store.commit('addCount', num)
    },
    changeCountFn () {
      this.$store.dispatch('changeCountAsync', 666)
    }
  }
}
</script>

<style lang="css" scoped>
.box{
  border: 3px solid #ccc;
  width: 400px;
  padding: 10px;
  margin: 20px;
}
h2 {
  margin-top: 10px;
}
</style>
